<template>
  <div>
        展示聊天内容：<br>
      <ul>
        <li v-for="item,i in meslist" :key="i">{{item}}</li>
      </ul> 
        展示在线用户：<br>
        <ul>
            <li v-for="j,s in userlist" :key="s">
                <el-button @click="choseid(j.id)">{{j.name}}</el-button>
            </li>
        </ul>


      <el-form :model="frommes"  class="demo-ruleForm">
      <el-form-item label="请输入咨询内容" prop="pass">
          <el-input type="type" v-model="frommes.put" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
          <el-button type="primary" @click="submitForms">发送</el-button>
      </el-form-item>
      </el-form>
  </div>
</template>

<script>
export default {
    data(){
        return{
            meslist:[],
            dialogTableVisiblesa:false,
            lists:"",
            frommes:{
                put:""
            },
            user_id:"kefu",
            id:"",
            userlist:[],
            username:[],

        }
    },
    methods:{
        initWebsocket() {
            this.username = '客服' +  this.user_id
            this.ws = new WebSocket("ws://localhost:8000/webce/?id=" + this.user_id + '&username=' + this.username);
            this.ws.onopen = function(){
                // alert("success")
            };
            this.ws.onmessage = (msg) => {
                var mes = JSON.parse(msg.data);
                this.meslist.push(mes['mes'])
                this.userlist = mes['userlist']
            };

            this.ws.onclose = function () {
                // alert("close")
            };
        },
        submitForms(){
            if(this.id){
                var mes = this.username + "说：" + this.frommes.put
                this.meslist.push(mes)
                var sendmes = JSON.stringify({'id':this.id,'mes':mes})
                this.ws.send(sendmes)
            }else{
                alert("请选择用户")
            }
        },
        choseid(id){
            this.id = id
        }
    },

    mounted(){
        this.initWebsocket()
    }
}
</script>

<style>

</style>